 <template>
 	<view>
 		<view-ntop v-if="banner" :num="2" :img="banner"></view-ntop>

		<fudong></fudong>
 		<!-- tab -->


 		<view class="body-view">
 			<!-- 使用scroll-view实现tabsss滑动切换 -->
 			<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
 				<view class="menu-topic-view" v-for="(item,index) in tabsss" :id="'tabNum'+item.id" :key="index"
 					@click="swichMenu(index)">
 					<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
 						<text class="menu-topic-text">{{item.name}}</text>
 						<view class="menu-topic-bottom">
 							<view class="menu-topic-bottom-color">
 								<image v-if="currentTab==index" src="/static/images/tb.png" mode="widthFix"></image>
 							</view>
 						</view>
 					</view>
 				</view>
 			</scroll-view>
 			<!-- 内容 -->
 			<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange" :autoplay="false"
 				:style="{ height: swiperHeight + 'px' }">
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 0">
 						<!-- 关于加盟 -->
 						<view class="ntit">
 							<view class="ntit-box">
 								<image src="../../static/images/tz.png" mode="widthFix"></image>
 								<text>关于加盟</text>
 							</view>
 						</view>

 						<view class="swiper1">



 							<view class="lm-box1">
 								<text class="h1">{{content1[0].title}}</text>

 								<u-parse :content="content1[0].articleData.content"></u-parse>
 								<!-- <view class="com1">
 									百果园加盟政策在业界内被誉为“福利特许加盟”制<br>
 									秉承着与加盟商构建“事业共同体”的理念<br>
 									寻找认可百果园集团文化理念、经营模式的加盟商<br>
 									组成命运共同体<br>
 									一起事业共进，携手共赢
 								</view> -->
 							</view>

 							<view class="lm-box1">
 								<text class="h1">{{category12.categoryName}}</text>
 								<view class="lm-view">
 									<view class="lm-view-le" v-for="(item,index) in content12" :key="index">
 										<text class="h1">{{item.title}}</text>
 										<u-parse :content="item.articleData.content"></u-parse>
 									</view>
 									<!-- <view class="lm-view-le">
 										<text>总部</text>
 										加盟店经营、管理支持
 									</view> -->
 								</view>
								<u-parse :content="category12.content"></u-parse>
 								<!-- <view class="com1">
 									百果园和加盟店信赖关系的基础<br>
 									总部赋能加盟商，加盟店用心经营顾客
 								</view> -->
 							</view>
 						</view>
 					</view>
 				</swiper-item>
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 1">
 						<!-- 加盟优势 -->
 						<view class="ntit">
 							<view class="ntit-box">
 								<image src="../../static/images/tz.png" mode="widthFix"></image>
 								<text>加盟优势</text>
 							</view>
 						</view>

 						<view class="swiper2">

 							<view class="swiper2-box1">
 								<image :src="content2[0].image" mode="widthFix" class="swiper2-img1">
 								</image>
 								<view class="swiper2-box1-kua1">
 									<image src="/static/images/pp1.png" class="swiper2-img2" mode="widthFix"></image>
 									{{content2[0].title}}
 								</view>
 							</view>



 							<view class="swiper2-box2">
								
								<u-parse :content="content2[0].articleData.content"></u-parse>
 								<!-- <view class="h1">
 									6000家门店 <text class="dian">•</text> 全国领先
 								</view> -->

 								<view class="swiper2-box2-lise">
 									<view class="swiper2-box2-li" v-for="(item,index) in content22" :key="index">
 										<image :src="item.image" mode="aspectFill"></image>
 										<text>{{item.title}}</text>
 										<view class="h2">
 											{{item.description}}
 										</view>
 									</view>
 								</view>

 							</view>

 							<view class="swiper2-box3">
 								<view class="shuju njuli">
 									<view class="shuju-lise">
 										<view class="shuju-li" v-for="(item,idnex) in content23" :key="index">
 											<view class="img">
 												<image :src="item.image" mode="widthFix"></image>
 											</view>
 											<view class="shuju-zi">
												<u-parse :content="item.articleData.content"></u-parse>
 												<!-- <view class="sj-num">{{item.sjnum}}
 													<view class="sj-dw">{{item.title}}</view>
 												</view> -->
 												<view class="shuju-wa">
 													{{item.title}}
 												</view>
 											</view>
 										</view>
 									</view>
 								</view>

 							</view>



 							<view class="swiper2-box1 swiper2-box4">
 								<image :src="content24.image" mode="widthFix" class="swiper2-img1">
 								</image>
 								<view class="swiper2-box1-kua1">
 									<image src="/static/images/pp02.png" class="swiper2-img2" mode="widthFix"></image>
 									{{content24.title}}
 								</view>
 							</view>


 							<view class="swiper2-box5">
 								<image :src="content24.file" mode="widthFix"></image>
								
								
								<u-parse :content="content24.articleData.content"></u-parse>
 								<!-- <view class="span">全球26国 • 直采近1000种好水果
 									更多优质产区 • 全球合作超800个水果基地
 									更多采购专家 • 全球300人采购团队严选</view>

 								<view class="span">专研水果22年 • 打造更多独家招牌果
 									全球首创 • “四度一味一安全”水果分级体系
 									更严品质把控 • 全球公认SGS食品安全体系认证企业
 									专注好果开发 • 35个独家水果品牌
 									领先种植技术 • 日本BLOF种植技术体系</view> -->
 							</view>
 							<!-- <view class="shuju-tishi">
 								*数据来源：<br>
 								弗若斯特沙利文，基于对水果连锁零售市场的研究，于2023年12月完成调研；百果园2023年度半年报；百果园ERP系统/EHR系统/BI系统。
 							</view> -->

 							<u-parse :content="content241.content"></u-parse>
 							<view class="swiper2-box1">
 								<image :src="content25.image" mode="widthFix" class="swiper2-img1">
 								</image>
 								<view class="swiper2-box1-kua1">
 									<image src="/static/images/pp03.png" class="swiper2-img2" mode="widthFix"></image>
 									{{content25.title}}
 								</view>
 							</view>

 							<u-parse :content="content25.articleData.content"></u-parse>
 							<!-- <view class="tera">事业共同体<br>
 								“福利式特许加盟”政策<br>
 								毛利额阶梯式累进收取特许经营费</view> -->


 							<view class="swiper2-box1 swiper2-box4">
 								<image :src="content26.image" mode="widthFix" class="swiper2-img1">
 								</image>
 								<view class="swiper2-box1-kua1">
 									<image src="/static/images/pp04.png" class="swiper2-img2" mode="widthFix"></image>
 									{{content26.title}}
 								</view>
 							</view>

 							<u-parse :content="content26.articleData.content"></u-parse>
 							<!-- <view class="tera">成熟、系统的培训体系<br>
 								专业、专属的开业、运营支持<br>
 								线上线下一体化的销售系统</view> -->



 						</view>
 					</view>
 				</swiper-item>
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 2">
 						<!-- 加盟支持 -->
 						<view class="qysj njuli">
 							<view class="ntit">
 								<view class="ntit-box">
 									<image src="../../static/images/tz.png" mode="widthFix"></image>
 									<text>加盟支持</text>
 								</view>
 							</view>
 							<view class="swiper3-box1">
 								<view class="qysj-li" v-for="(item,index) in content3" :key="index">
 									<view class="qysj-li-box">
 										<view class="qysj-lef">
 											<view class="qysj-dian">
 											</view>
 											<view class="qysj-xian">
 											</view>
 										</view>

 										<view class="qysj-rig">
 											<text>{{item.title}}</text>
 											<view class="qysj-wa">

 												<u-parse :content="item.articleData.content"></u-parse>
 											</view>
 										</view>
 									</view>
 								</view>
								<u-parse :content="showTips.content"></u-parse>
 								<!-- <view class="shuju-tishi">

 									
 									*数据来源：<br>
 									弗若斯特沙利文，基于对水果连锁零售市场的研究，于2023年12月完成调研；百果园2023年度半年报；百果园ERP系统/EHR系统/BI系统。
 								</view> -->

 							</view>


 						</view>

 					</view>

 				</swiper-item>
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 3">
 						<!-- 加盟流程 -->

 						<view class="qysj njuli">
 							<view class="ntit">
 								<view class="ntit-box">
 									<image src="../../static/images/tz.png" mode="widthFix"></image>
 									<text>加盟流程</text>
 								</view>
 							</view>
 							<view class="swiper4-box1">

 								<view class="jm-li" v-for="(item,index) in content4" :key="index">
 									<view class="jm-box1">
 										<view class="jm-num">
 											0{{index+1}}
 										</view>
 										<view class="jm-tit">
 											<image :src="item.image" mode="widthFix"></image>
 											{{item.title}}
 										</view>
 									</view>


 									<view class="jm-tit2">
 										<u-parse :content="item.articleData.content"></u-parse>
 									</view>
 								</view>
 								<view class="xian">

 								</view>
 							</view>



 						</view>
 					</view>
 				</swiper-item>

 				<!-- 切换 -->
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 4">
 						<view-tab></view-tab>
 					</view>
 				</swiper-item>
 				<swiper-item class="swiper-topic-list">
 					<view class="swiper-item" :id="'content-wrap' + 5">
 						<view class="qysj njuli">
 							<view class="ntit">
 								<view class="ntit-box">
 									<image src="../../static/images/tz.png" mode="widthFix"></image>
 									<text>联系方式</text>
 								</view>
 							</view>

 							<view class="lianxi">
 								<view class="lianxi-li" v-for="(item,index) in content5" :key="index">
 									<image :src="item.image" mode="widthFix"></image>
 									<view class="tit1">
 										<text>
 											{{item.title}}
 										</text>
 										<u-parse :content="item.articleData.content"></u-parse>
 									</view>

 								</view>
 							</view>

 						</view>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>




 		<view-dibu></view-dibu>
 		<view-tabbar :current="2"></view-tabbar>
 	</view>
 </template>

 <script>
 	import Tabbar from '@/components/tabbar.vue'
 	import ntop from '@/components/ntop.vue'
 	import dibu from '@/components/dibu.vue'
 	import tab from '@/components/tab.vue'

	import fudong from '@/components/fudong.vue'
 	import {
 		apiBaseUrl
 	} from '@/config/config.js'
 	export default {
 		data() {
 			return {
 				apiBaseUrl,
 				banner: '',
 				height: '80vh',
 				//swiper滑块的高度(单位px)
 				//swiper当前索引
 				currentTab: 0,

 				scrollLeft: 0,
 				tabsss: [{
 						id: 1,
 						name: '关于加盟'
 					},
 					{
 						id: 2,
 						name: '加盟优势'
 					},
 					{
 						id: 3,
 						name: '加盟支持'
 					},
 					{
 						id: 4,
 						name: '加盟流程'
 					},
 					{
 						id: 5,
 						name: '加盟模式'
 					},
 					{
 						id: 6,
 						name: '联系方式'
 					},

 				],
 				tabCurrent: 'tabNum1',


 				navIndex: 0,
 				// tab切换区域的高度
 				swiperHeight: 0,



 				// Tab切换内容
 				// swiperDateList: [{
 				// 		id: 1,
 				// 		content: '选项卡2222页面'
 				// 	},
 				// 	{
 				// 		id: 2,
 				// 		content: '选项卡2页面'
 				// 	},
 				// 	{
 				// 		id: 3,
 				// 		content: '选项卡3页面'
 				// 	},
 				// 	{
 				// 		id: 4,
 				// 		content: '选项卡4页面'
 				// 	},
 				// 	{
 				// 		id: 5,
 				// 		content: '选项卡5页面'
 				// 	},
 				// 	{
 				// 		id: 6,
 				// 		content: '选项卡6页面'
 				// 	},
 				// 	{
 				// 		id: 7,
 				// 		content: '选项卡7页面'
 				// 	},
 				// ],


 				tabs: [{
 					title: '加盟A模式'
 				}, 
				// {
 			// 		title: '加盟B模式'
 			// 	}, 
				],
				content22:[],
				content23:[],
				content24:{},
				content241:{},
				content25:{},
				content26:{},
 				showTips: {},
 				content1: {},
 				content2: {},
 				content3: {},
 				content12: [],
 				content4: {},
				category12:{},
 				content5: {},
 				content6: {},
 				swiper2lise: [{
 						img: '/static/images/pp2.png',
 						tt: '全国水果连锁',
 						tr: '连续十年销量NO.1'
 					},
 					{
 						img: '/static/images/pp3.png',
 						tt: '全国水果连锁销售额',
 						tr: '超过2到5名总和'
 					},
 					{
 						img: '/static/images/pp4.png',
 						tt: '全国水果连锁销售额',
 						tr: 'NO.1'
 					},
 					{
 						img: '/static/images/pp5.png',
 						tt: '全国水果连锁门店数',
 						tr: 'NO.1'
 					}, {
 						img: '/static/images/pp6.png',
 						tt: '水果外卖及时达销售额',
 						tr: 'NO.1'
 					}, {
 						img: '/static/images/pp7.png',
 						tt: '抖音生活服务水果类销售额',
 						tr: 'NO.1'
 					},
 				],


 				sjlise: [{
 						sjimg: '/static/images/nico3.png',
 						sjnum: '150',
 						sjdw: '+',
 						sjwa: '遍布全国城市'
 					},
 					{
 						sjimg: '/static/images/nico4.png',
 						sjnum: '18',
 						sjdw: '亿',
 						sjwa: '人次购买'
 					},
 					{
 						sjimg: '/static/images/nico5.png',
 						sjnum: '8000',
 						sjdw: '万+',
 						sjwa: '品牌会员数'
 					},
 					{
 						sjimg: '/static/images/nico6.png',
 						sjnum: '29',
 						sjdw: '个',
 						sjwa: '布局仓储配送中心'
 					},
 				],


 				qysjli: [{
 					qynf: '品牌支持',
 					qywa: '品牌影响力，公司进行了全产业链布局，严格执行采购、配送、销售、营销运营等标准，运营管理体系化、标准化，全产业链科技数据化、平台化。'
 				}, {
 					qynf: '开业支持',
 					qywa: '拥有专业的开业团队，为加盟商提供开业支持与帮助。'
 				}, {
 					qynf: '培训支持',
 					qywa: '公司建立了专业、成熟、系统的培训体系，向加盟商提供一线岗位人员培训支持，使员工快速上手，店员快速进入状态。'
 				}, {
 					qynf: '管理支持',
 					qywa: '标准化的管理、专业的管理团队，助力加盟商运营管理。'
 				}, {
 					qynf: '产品支持',
 					qywa: '全球26国直采近1000种好水果，合作超800个水果基地，300人采购团队严选，全球首创“四度一味一安全”水果分级体系，全球公认SGS食品安全体系认证企业，35个独家水果品牌，引入BLOF种植技术体系，保障加盟商的货源供应及品质。'
 				}, {
 					qynf: '营销支持',
 					qywa: '公司统一组织线上、线下等多渠道营销活动，助力加盟商门店销售，促进加盟商业绩提升。'
 				}, {
 					qynf: '租金平衡政策',
 					qywa: '对租金较高门店可减免特许权使用费。在计算门店特许权使用费时，对租金较高门店，即门店月租金/月销售额超过6%的门店，超出部分可享受租金平衡政策，从应缴纳的特许权使用费中减免。'
 				}, {
 					qynf: '资金支持政策',
 					qywa: '帮助加盟店平稳渡过养店期而设立了资金支持政策。'
 				}, ],

 				jmli: [{
 					jmnum: '01',
 					jmimg: '/static/images/jm1.png',
 					jmtit: '互相了解',
 					jmwa: '加盟申请\n加盟说明会\n素质评估\n签署意向书',
 				}, {
 					jmnum: '02',
 					jmimg: '/static/images/jm2.png',
 					jmtit: '确认合作',
 					jmwa: '门店体验\n面谈审核\n店铺甄选\n信息披露',
 				}, {
 					jmnum: '03',
 					jmimg: '/static/images/jm3.png',
 					jmtit: '开始旅程',
 					jmwa: '签订合同\n店长培训\n店铺装修\n开业运营',
 				}, {
 					jmnum: '04',
 					jmimg: '/static/images/jm4.png',
 					jmtit: '加盟完成',
 					jmwa: '加盟完成',
 				}],


 				lianxi: [{
 						img: '/static/images/lx1.png',
 						texa: '公司总部地址',
 						texb: '深圳市龙岗区平吉大道1号建昇大厦B座11-13楼',
 					},
 					{
 						img: '/static/images/lx2.png',
 						texa: '集团加盟拓展中心地址',
 						texb: '深圳市龙岗区平吉大道1号建昇大厦A座3层7-12（百果园）',
 					},
 					{
 						img: '/static/images/lx3.png',
 						texa: '加盟热线',
 						texb: '400-181-1212',
 					},
 					{
 						img: '/static/images/lx4.png',
 						texa: '百果园官网',
 						texb: 'www.pagoda.com.cn',
 					},
 				],
 			}
 		},
 		onLoad(args) {
 			//动态设置swiper的高度
 		},
		
		onShareAppMessage() {},
		onShareTimeline() {},
 		methods: {

 			initData() {
 				this.$api.category_list_data({
 					siteCode: 'main',
 					categoryCode: 1003004
 				}, res => {
 					if (res.code == 200) {
 						this.showTips = res.data
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003001
 				}, res => {
 					if (res.code == 200) {
 						this.banner = res.data.list[0].sjImage
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003002001
 				}, res => {
 					if (res.code == 200) {
 						this.content1 = res.data.list
 						this.$nextTick(() => {
 							this.setSwiperHeight();
 						});
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003002002
 				}, res => {
 					if (res.code == 200) {
 						this.content12 = res.data.list
 						this.$nextTick(() => {
 							this.setSwiperHeight();
 						});
 					}
 				})
 				this.$api.category_list_data({
 					siteCode: 'main',
 					categoryCode: 1003002002
 				}, res => {
 					if (res.code == 200) {
 						this.category12 = res.data
 						this.$nextTick(() => {
 							this.setSwiperHeight();
 						});
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003005001
 				}, res => {
 					if (res.code == 200) {
 						this.content2 = res.data.list
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003005002
 				}, res => {
 					if (res.code == 200) {
 						this.content22 = res.data.list
 					}
 				})

 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003005003
 				}, res => {
 					if (res.code == 200) {
 						this.content23 = res.data.list
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003006
 				}, res => {
 					if (res.code == 200) {
 						this.content24 = res.data.list[0]
 					}
 				})
 				this.$api.category_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003006
 				}, res => {
 					if (res.code == 200) {
 						this.content241 = res.data
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003007
 				}, res => {
 					if (res.code == 200) {
 						this.content25 = res.data.list[0]
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003003008
 				}, res => {
 					if (res.code == 200) {
 						this.content26 = res.data.list[0]
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003004
 				}, res => {
 					if (res.code == 200) {
 						this.content3 = res.data.list
 					}
 				})
 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003005
 				}, res => {
 					if (res.code == 200) {
 						this.content4 = res.data.list
 					}
 				})

 				this.$api.article_list_data({
 					siteCode: 'main',
 					categoryCode: 1003007
 				}, res => {
 					if (res.code == 200) {
 						this.content5 = res.data.list
 					}
 				})

 			},
 			swichMenu(id) {
 				this.currentTab = id
 				console.log(11, id)
 				//this.tabCurrent = 'tabNum'+ id

 				// 滑动swiper后，每个选项距离其父元素最左侧的距离
 				this.scrollLeft = 0;
 				for (let i = 0; i < id; i++) {
 					this.scrollLeft += 60
 					console.log(this.scrollLeft, 60, id)
 				};

 			},
 			swiperChange(e) {
 				console.log(22, e.detail.current)
 				let index = e.detail.current
 				this.swichMenu(index)

 				this.showingTabIndex = e.detail.current
 				console.log('Switch to Tab #', this.showingTabIndex)

 				this.currentTab = e.detail.current;
 				//动态设置swiper的高度，使用nextTick延时设置
 				this.$nextTick(() => {
 					this.setSwiperHeight();
 				});

 			},
 			//动态设置swiper的高度
 			setSwiperHeight() {
 				let element = "#content-wrap" + this.currentTab;
 				let query = uni.createSelectorQuery().in(this);
 				query.select(element).boundingClientRect();
 				query.exec((res) => {
 					if (res && res[0]) {
 						this.swiperHeight = res[0].height;
 					}
 				});
 			},

 		},
 		components: {
 			'view-tabbar': Tabbar,
 			'view-ntop': ntop,
 			'view-dibu': dibu,
 			'view-tab': tab,
			fudong
 		},
 		onShow() {
 			uni.hideTabBar({
 				animation: false
 			})
 			this.initData()
 		},
 	}
 </script>
<style lang="scss">
	.body-viewxin {
		width: 100%;
		overflow: hidden;


		.top-menu-view {
			display: flex;
			position: fixed;
			top: 0rpx;
			left: 0;
			white-space: nowrap;
			width: 100%;
			height: auto;
			border-radius: 100rpx;

			.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 100%;
				position: relative;
				width: 50%;
				text-align: center;
				border-radius: 100rpx;
				overflow: hidden;

				.menu-topic-act {
					border-radius: 100rpx;
				}

				.menu-topic-text {
					font-size: 30rpx;
					color: #888888;
					font-weight: 500;
					display: block;
					// padding: 30rpx 30rpx;
				}

				.menu-topic-bottom {
					position: absolute;
					bottom: 0;

					.menu-topic-bottom-color {
						width: 40rpx;
						height: 4rpx;
					}
				}

				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}

				.menu-topic-act .menu-topic-text {
					color: #fff;
					background: #00943a;
				}


				.menu-topic-act .menu-topic-bottom-color {
					color: #fff;
					background: #00943a;
				}
			}
		}

		.swiper-box-list {
			width: 95%;
			margin: 140rpx auto 30rpx;
			flex: 1;
			height: calc(210vh - 251rpx);

			.swiper-topic-list {
				width: 100%;
			}
		}

		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		/deep/.uni-scroll-view::-webkit-scrollbar {
			display: none
		}

		.ann {
			border-radius: 300rpx;
			overflow: hidden;
			background: #fff;
			padding: 10rpx;
		}
	}

	.jmtj-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff;
		border-radius: 80rpx;
		padding: 30rpx;
		margin-top: -60rpx;
		padding-top: 80rpx;

		.jmtj-li {
			width: 45%;
			display: flex;
			margin: 20rpx 0;

			.jmtj-wenzi {
				font-size: 24rpx;
				color: #00943a;
				width: 80%;
			}

			image {
				margin-right: 20rpx;
				width: 30rpx;
				margin-top: 10rpx;

			}
		}
	}

	.jmtj2 {

		text-align: center;
	}

	.jmtjjj {
		margin-bottom: 80rpx;
	}

	.jmtj-box3 {
		display: block !important;
		color: #00943a;
		background: #fff;
		border-radius: 100rpx;
		padding: 30rpx;
		margin-top: -60rpx;
		padding-top: 80rpx;
	}

	.bg {
		width: 100%;
		font-size: 25rpx;
		height: auto;
		top: 0;
		background: #fbfbfb;
		margin-bottom: 40rpx;

		.studentInfo {
			width: 100%;
			border-radius: 20rpx;

			/deep/ ._table {
				border-top: 1rpx solid rgb(223, 226, 229);
				border-right: 1rpx solid rgb(223, 226, 229);
			}


			/deep/ ._td {
				border-left: 1rpx solid rgb(223, 226, 229);
				border-bottom: 1rpx solid rgb(223, 226, 229);
			}

			/deep/ ._th {
				border-left: 1rpx solid rgb(223, 226, 229);
				border-bottom: 1rpx solid rgb(223, 226, 229);
			}
		}

		.fill {
			height: 80rpx;
		}
	}

	/deep/ .u-line {
		margin: 0 auto !important;
	}
	.shuju-tishi {
		margin-left: 00rpx;
		margin-right: 00rpx;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
		color: #888888;
		font-size: 25rpx;
	}
	.kkl {
		font-size: 28rpx;
		.text {
			margin-bottom: 20rpx;
			display: block !important;
			font-size: 24rpx;
		}
	}
	.jmtj-box3 {
		.shuju-tishi{
			padding: 24rpx 0 !important;
		}
		.bg {
			.kkl {
				margin-bottom: 20rpx;
				display: block;
			}

			.studentInfo {
				display: block;
				text-align: center;
			}
			.studentInfo1 {
				background: #fbfbfb;
				margin-bottom: 50rpx;
			}
		}
	}
	
	
	
	.jmtj-box2 {
		display: block !important;
		font-size: 24rpx;
		color: #00943a;
	line-height: 36rpx;
		background: #fff;
		border-radius: 100rpx;
		padding: 80rpx 30rpx  40rpx;
		margin-top: -60rpx;
	}
</style>
 <style lang="scss">
 	.body-view {
 		margin-top: 40rpx;
 	}

 	.top-menu-view {
 		display: flex;
 		z-index: 100;
 		//top: 84rpx;
 		/* #ifdef H5 */
 		top: 84rpx;
 		/* #endif */
 		/* #ifndef H5 */
 		top: 0rpx;
 		/* #endif */
 		left: 0;
 		white-space: nowrap;
 		width: 95%;
 		height: 86rpx;
 		line-height: 86rpx;

 		.menu-topic-view {
 			display: inline-block;
 			white-space: nowrap;
 			height: 86rpx;
 			position: relative;

 			.menu-topic-text {
 				font-size: 30rpx;
 				color: #888888;
 				padding: 10rpx 20rpx;
 				font-weight: 500;
 			}

 			.menu-topic-bottom {
 				position: absolute;
 				bottom: 0;
 				width: 100%;

 				.menu-topic-bottom-color {
 					width: 40rpx;
 					position: relative;
 					top: 30rpx;

 					image {
 						width: 40rpx;
 						height: 40rpx;
 					}
 				}
 			}

 			.menu-topic-act .menu-topic-bottom {
 				display: flex;
 				justify-content: center;
 			}

 			.menu-topic-act .menu-topic-text {
 				color: #00943a;
 			}


 			// .menu-topic-act .menu-topic-bottom-color {
 			// 	background: #00943a;
 			// }
 		}
 	}

 	.swiper-box-list {
 		width: 90%;
 		margin: 40rpx auto 30rpx;
 		flex: 1;
 		height: calc(210vh - 251rpx);

 		.swiper-topic-list {
 			width: 100%;
 		}
 	}

 	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
 	/deep/.uni-scroll-view::-webkit-scrollbar {
 		display: none
 	}


 	// box1
 	.lm-box1 {

 		.h1 {
 			color: #00943a;
 			font-size: 32rpx;
 			font-weight: bold;

 		}

 		.com1 {
			display: block !important;
 			font-size:22rpx;
 			color: #4e3021;
 			line-height: 1.6;
 			padding-top: 30rpx;
 			padding-bottom: 50rpx;
 		}
 	}

 	.swiper1 {
 		background-color: #fff;
 		border-radius: 80rpx;
 		padding:70rpx 30rpx 0;
 		position: relative;
 		top: -70rpx;
 		z-index: -1;
 		text-align: center;

 		.lm-view {
 			display: flex;
 			justify-content: space-between;
 			border-radius: 20rpx;
 			margin-top: 30rpx;
 			overflow: hidden;

 			.lm-view-le {
 				width: 46%;
 				background: #f3f5f7;
 				color: #ff9faa;
 				padding: 20rpx 10rpx;
 				font-size: 27rpx;

 				.h1 {
 					color: #ff9faa;
 					display: block;
 					line-height: 2;
 				}
 			}
 		}
 	}

 	.swiper2 {

 		.swiper2-box1 {
 			position: relative;
 			text-align: center;
 			border-radius: 50rpx;
 			overflow: hidden;
 			margin-bottom: 60rpx;

 			.swiper2-img1 {
 				width: 100%;


 			}

 			.swiper2-box1-kua1 {
 				position: absolute;
 				width: 110rpx;
 				height: 110rpx;
 				color: #fff;
 				font-size: 26rpx;
 				background: #ff9faa;
 				border-radius:30rpx;
 				padding: 20rpx;
 				top: 0;
 				bottom: 0;
 				left: 30rpx;
 				margin: auto;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				flex-wrap: wrap;


 				.swiper2-img2 {
 					width: 50rpx;
 					height: 50rpx;
 					display: block;
 					margin: auto;
 					margin-bottom: 10rpx;
 				}
 			}



 		}

 		.swiper2-box2 {
 			.h1 {
				display: block !important;
 				text-align: center;
 				font-size: 48rpx;
				font-weight: bold;
 				color: #00943a;

 				.dian {
 					color: #ff9faa;
 					margin: 0 10rpx;
 				}
 			}

 			.swiper2-box2-lise {

 				display: flex;
 				flex-wrap: wrap;
 				justify-content: space-between;

 				.swiper2-box2-li {
 					width: 48%;
 					text-align: center;
 					display: flex;
 					flex-wrap: wrap;
 					justify-content: center;
 					margin: 30rpx 0;
 					padding-bottom: 40rpx;
 					border-bottom: 1rpx solid #00000014;

 					image {
 						width: 122rpx;
 						height: 120rpx;
 						display: block;
						margin: 0 0 24rpx;
 					}

 					text {
 						display: block;
 						width: 100%;
 						font-size: 22rpx;
 						color: #4e3021;
 						line-height: 1.5;
 						margin-bottom: 12rpx;
 					}

 					.h2 {
 						text-align: 32rpx;
 						color: #00943a;
						font-weight: bold;
 					}
 				}
 			}
 		}

 		.shuju {
 			padding: 30rpx 0 10rpx;
 			border-radius: 50rpx;

 			.shuju-lise {
 				display: flex;
 				flex-wrap: wrap;
 				justify-content: space-between;

 				.shuju-li {
 					width: 45%;
 					text-align: left;
 					display: flex;
 					align-items: center;
 					margin:0 0 60rpx;


 					.img {
 						background: #ff9faa;
 						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100rpx;
						height: 100rpx;
						min-width: 100rpx;
 						margin-right: 10rpx;
 					}

 					.shuju-zi {
 						color: #00943a;

 						.shuju-wa {
 							font-size:22rpx;
 						}

 						.sj-num {
 							display: flex;
 							align-items: flex-end;
 							font-weight: bold;
 							font-size: 48rpx;

 							.sj-dw {
 								font-size: 24rpx;
 								margin-left: 10rpx;
 								margin-bottom: 5rpx;
 							}
 						}
 					}
 				}

 				image {
 					width: 50rpx;
 				}
 			}
 		}

 		.swiper2-box4 {
 			.swiper2-box1-kua1 {
 				left: auto;
 				right: 30rpx;
 			}
 		}




 		.swiper2-box5 {
 			text-align: center;

 			image {
 				width: 400rpx;
 				display: block;
 				margin: auto;

 			}

 			._span {
 				display: block !important;
 				width: 100%;
 				margin-top: 40rpx;
 				font-size:28rpx;
				color: #4e3021;
 			}

 		}

 		.tera {
 			font-size: 30rpx;
 			color: #4e3021;
			display: block !important;
 			text-align: center;
 			line-height: 1.8;
 			padding-bottom: 35rpx;
 		}

 	}


 	// 加盟支持
 	.qysj {
 		position: relative;

 		.qysj-li-box {
 			display: flex;

 			.qysj-lef {
 				width: 10%;

 				.qysj-dian {
 					width: 24rpx;
 					height: 24rpx;
 					background: #00943a;
 					border-radius: 50%;
					margin-top: 8rpx;
 				}

 				.qysj-xian {
 					width: 8rpx;
 					height: 100%;
 					background-color: #ff9faa;
 					margin-left: 8rpx;
 				}
 			}

 			.qysj-rig {
 				width: 85%;

 				text {
 					color: #00943a;
 					font-size: 28rpx;
					font-weight: bold;
 				}

 				.qysj-wa {
 					font-size: 22rpx;
 					color: #4e3021;
 					line-height: 1.6;
 					margin-top: 12rpx;
 					margin-bottom: 30rpx;
 				}
 			}
 		}
 	}

 	.shuju-tishi {
		display: block !important;
 		margin-left: 0rpx;
 		margin-right: 0rpx;
 		padding: 50rpx 0;
 		color: #888888;
 		font-size: 25rpx;
 		line-height: 1.5;
 	}

 	.swiper3-box1 {
 		background: #fff;
 		border-radius: 80rpx;
 		padding: 60rpx 40rpx;
 		position: relative;
 		top: -70rpx;
 		padding-top: 80rpx;
 		z-index: -1;

 		.shuju-tishi {
 			margin-top: 20rpx;
 		}
 	}


 	.swiper4-box1 {
 		padding: 60rpx 40rpx;
 		background: #fff;
 		border-radius: 80rpx;
 		z-index: -1;
 		padding-top: 80rpx;
 		position: relative;
 		top: -70rpx;

 		.jm-li {


 			.jm-box1 {
 				display: flex;
 				align-items: center;
 				position: relative;
 				overflow: hidden;
 				padding: 10rpx 0;
 				display: flex;
 				flex-wrap: wrap;
 			}

 			.jm-num {
 				background: #ff9faa;
 				color: #fff;
 				text-align: center;
 				border-radius: 100rpx;
 				// padding: 15rpx;
 				font-size: 40rpx;
 				border: 2px solid #fff;
 				position: absolute;
 				top: 0;
 				bottom: 0;
 				left: 0;
 				right: 0;
 				width: 100rpx;
 				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
 				margin: auto;
 			}

 			.jm-tit {
 				background: #ff9faa;
 				color: #fff;
 				text-align: center;
 				font-size: 28rpx;
 				padding: 24rpx 0;
 				padding-left: 100rpx;
 				border-radius: 100rpx;
 				display: flex;
				font-weight: bold;
 				width: 37%;
 				align-items: center;
 				float: right;
 				width: 37%;
 				margin-left: auto;
 				margin-right: 0;

 				image {
 					width: 50rpx;
 					margin-right: 16rpx;
 				}



 			}

 		}

 		.jm-tit2 {
 			display: flex;
 			width: 37%;
 			margin-right: 0;
 			margin-left: auto;
 			padding: 20rpx 0;
 			line-height: 1.5;
			font-size: 26rpx;
			color: #4e3021;
 		}

 		.jm-li:nth-child(2n) .jm-tit2 {
 			margin-right: auto;
 			margin-left: 0;
 			padding-left: 40rpx;
 		}

 		.jm-li:nth-child(2n) .jm-tit {
 			padding-left: 0rpx;
 			padding-right: 50rpx;

 			width: 37%;
 			margin-left: 0;
 			margin-right: auto;
 			padding-left: 50rpx;
 		}


 		.jm-li:not(:nth-child(1)) {
 			margin-top: -65rpx;
 		}

 		.xian {
 			position: absolute;
 			width: 6rpx;
 			background-color: #ff9faa;
 			margin: auto;
 			height: 72%;
 			top: 0%;
 			left: 0;
 			right: 0;
 			bottom: 0;
 			z-index: -1;
 		}
 	}


 	.lianxi {
 		padding: 60rpx 40rpx;
 		background: #fff;
 		border-radius: 80rpx;
 		z-index: -1;
 		padding-top: 80rpx;
 		position: relative;
 		top: -70rpx;


 		.lianxi-li {
 			display: flex;
 			align-items: flex-start;
 			justify-content: space-between;
 			margin: 25rpx 0;

 			.tit1 {
 				width: 85%;
 				font-size: 24rpx;
 				color: #555555;
 				line-height: 1.7;

 				text {
 					display: block;
 					width: 100%;
 					font-size:32rpx;
 					color: #00943a;
					font-weight: bold;
 				}
 			}

 			image {
 				width: 40rpx;
				margin-top: 6rpx;
 				margin-right: 20rpx;
 			}
 		}
 	}
	
 </style>